<template>
  <div :class="'ep-s-' + size">
    <a-range-picker style="width:100%" v-if="type==='range'" :allowClear="allowClear" v-model="modelValue"
                    :disabled="theDisabled" :format="theFormat" :showToday="showToday" :valueFormat="theFormat"
                    :showTime="showTime" :inputReadOnly="inputReadOnly" :placeholder="placeholder"
                    @change="onDateChange" @ok="onOk" @blur="() => {$refs[prop].onFieldBlur();this.onFieldBlur();}"
                    @focus="onFocus" @openChange="onOpenChange" @panelChange="onPanelChange"
                    :disabled-date="disabledDate" :disabled-time="disabledDateTime">
      <slot/>
    </a-range-picker>
  </div>
</template>

<script>
export default {
  name: "rangpick"
}
</script>

<style lang="less" scoped>
.ep-s-large {
  ::v-deep .ant-input-wrapper {
    .ant-input {
      height: 40px;
      //background: #002a44;
      border: 1px solid #3e9fc8;
      font-size: 16px;
      &:focus {
        box-shadow: none;
      }
    }
    .ant-btn {
      height: 40px;
      //background: #3e9fc8;
      //border: 1px solid #3e9fc8;
      font-size: 16px;
    }
  }
}
.ep-s-default {
  ::v-deep .ant-input-wrapper {
    .ant-input {
      height: 32px;
      //background: #002a44;
      border: 1px solid #3e9fc8;
      &:focus {
        box-shadow: none;
      }
    }
    .ant-btn {
      height: 32px;
      //background: #3e9fc8;
      //border: 1px solid #3e9fc8;
      font-size: 16px;
    }
  }
}
</style>